<template>
  <div style="position:absolute; left:0; top:0; right:0; bottom:0; overflow:hidden; color:#000;">
      <SelfAdaption width="1920" height="1080" mode="auto-x-y">
          <div style="width:100%; height:100%; background:#ccc;">
              <EchartComponent @register="registerEchart" style="width:300px; height:400px; overflow:hidden;"></EchartComponent>
              <Swiper class="swiper" :=swiperOption style="width:400px; height:300px; background-color:#fff;">
                <SwiperSlide v-for="i of 10" style="width:200px;">Slide {{ i }}</SwiperSlide>
                <div class="swiper-pagination" slot="pagination"></div>
              </Swiper>
              <RepeatScroll>
                <p><AnimatedInteger :value="1241242221111.4444" thousands></AnimatedInteger></p>
                <AnimatedInteger :value="1241242221111" thousands></AnimatedInteger>
                <AutoRow :mode="mode">
                  <AutoCol size="auto" v-slot="{el}" justify="between" @click="load('测试')">
                    <span>
                      click
                    </span>
                    <span>
                      {{ el ? el.offsetHeight : ''}}
                    </span>
                  </AutoCol> 
                  <template v-for="(item,i) of aa">
                    <AutoCol size="auto" min="100" v-slot="{el}" tarname="li">
                      {{ i }}-{{ el ? el.offsetWidth : ''}}
                    </AutoCol>  
                  </template>
                </AutoRow>
              </RepeatScroll>
          </div>
      </SelfAdaption>
  </div>
</template>
<script lang="ts" setup>


import {EchartComponent, useEchart, $echarts} from '@/Echarts'
let {registerEchart,updata} = useEchart({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}, (data, option) => {
  option.series[0].data = data
  return option
})
// updata([10, 30, 224, 218, 135, 147, 260])


import {
  AutoRow,
  AutoCol,
  SelfAdaption,
  RepeatScroll,
  AnimatedInteger,
} from '@/components'
import {ref, reactive} from "vue"


import { Swiper, SwiperSlide} from 'vue-awesome-swiper'
import 'swiper/css'
const swiperOption = ref({
  spaceBetween: 22,
  // centeredSlides: true,
  slidesPerView: 'auto',
  // touchRatio: 0.2,
  // slideToClickedSlide: true,
  // paginationClickable: true,
  // pagination: {
  //     el: '.swiper-pagination',
  //     type: 'fraction'
  // },
  // navigation:{
  //     nextEl:".swiper-button-next",
  //     prevEl:".swiper-button-prev"
  // },
})
      

import {useRouter} from "vue-router"
const $router = useRouter()
let aa = ref([0,1,2]);
let mode = ref("column");
document.body.onclick=() => {
    updata([aa.value.length*10, 30, 224, 218, 135, 147, 260])
    aa.value.push(aa.value.length+1);
    // mode.value = aa.value.length%2==0 ? 'column' : "row";
}
function load(e){
    console.log(e)
}

</script>

<style scoped>

</style>
